<template>
  <div id="detailapplybox" class="rightBodyContent">
    <div class="rightBodyContent-in">
      <el-button type="primary" plain @click="backlist"><i class="el-icon-back"></i>返回列表</el-button>
      <div class="applybody">
        <div class="applybody-title">
          申请班级：<span>{{applydetail.class_id.class_name}}</span>，申请教师：<span>{{applydetail.user_id}}</span>
        </div>
        <h2 class="h2box"><span>申请项目</span>
          <el-button size="small" type="danger" plain @click="submitCheckedFn" v-if="applydetail.status==1">
            确认此条分配
          </el-button>
          <i v-else>已完成分配</i>
        </h2>
        <div class="table-body">
          <div class="table-body-box">
            <el-table
                    ref="multipleTable"
                    :data="list_check"
                    :stripe="tableStripe"
                    :border="tableBorder"
                    tooltip-effect="dark"
                    style="width: 100%"
                    header-cell-class-name="table-text-c"
                    cell-class-name="table-text-c">
              <el-table-column
                      prop="name"
                      label="教辅具名称"
                      width="260">
              </el-table-column>
              <el-table-column
                      prop="pic"
                      label="缩略图"
              >
                <template slot-scope="scope">
                  <img :src="scope.row.pic" alt="" width="120" height="80" v-if="scope.row.pic!==''"
                       @click="preveimg(scope.row.pic)">
                  <img src="@/assets/imageAdmin/defultimgline.png" alt="" width="120" height="680" v-else>
                </template>
              </el-table-column>
              <el-table-column
                      prop="number"
                      label="可用数量"
                      width="160">
                <template slot-scope="scope">
                  <span v-if="scope.row.use_num">{{scope.row.use_num}}</span>
                  <span v-else>{{scope.row.tnum}}</span>
                </template>
              </el-table-column>
              <el-table-column
                      prop="number"
                      label="调拨位置"
                      width="160">
                <template slot-scope="scope">
                  <span v-if="scope.row.class_name">{{scope.row.class_name}}</span>
                  <span v-else>总仓</span>
                </template>
              </el-table-column>
              <el-table-column
                      prop="number"
                      label="分配数量">
                <template slot-scope="scope">
                  <input type="number" v-model="scope.row.num" class="class_num_input" v-if="applydetail.status==1">
                  <span v-else>{{scope.row.num}}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        tableStripe: true, // 是否斑马栏
        tableBorder: true, // 单元格右边边框
        applydetail: JSON.parse(this.$route.query.id),
        applydetail_type: this.$route.query.type, // apply 申请页面进入的 checked 分配页面进入的
        editFormVisible: false,
        teachingList: [],
        applyBox: null,
        list_check: []
      }
    },
    created () {
      this.InitFn()
    },
    methods: {
      InitFn () {
        console.log('本页收到的数据2', JSON.parse(this.$route.query.id))
        if (this.applydetail_type === 'checked') {
          this.$fetch('tools_apply/toBollow', {apply_id: this.applydetail.id}).then((response) => {
            console.log('数据：', response)
            if (response.code === 0) {
              this.list_check = response.list
            } else {
            }
          }).catch((err) => {
            console.log(err)
          })
        }
      },
      // 返回前页
      backlist () {
        this.$router.go(-1)
      },
      // 分配教辅具
      lingyongList (option) {
        console.log('获取到的数据', option)
        this.applyBox = option
        this.$fetch('tools_apply/position', {tools_id: option.tools_id.id}).then((response) => {
          console.log('数据：', response)
          if (response.code === 0) {
            this.editFormVisible = true
            for (var i = 0; i < response.list.length; i++) {
              response.list[i].apply = 1
            }
            this.teachingList = response.list
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      // 确认教辅具
      lingyongList_checked (option) {
        console.log('获取到的数据', option)
        this.applyBox = option
        this.$fetch('tools_apply/toBollow', {history_id: option.id}).then((response) => {
          console.log('数据：', response)
          if (response.code === 0) {
            this.editFormVisible = true
            for (var i = 0; i < response.list.length; i++) {
              response.list[i].apply = 1
            }
            this.teachingList = response.list
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      editSubmit () {
        console.log('点击teachingList：', this.teachingList)
        console.log('点击applyBox：', this.teachingList)
        var num_ = 0
        var data = []
        for (var i = 0; i < this.teachingList.length; i++) {
          var data_arry = {}
          console.log(this.teachingList[i].apply)
          console.log(isNaN(this.teachingList[i].apply))
          if (isNaN(this.teachingList[i].apply)) {
            this.$message.error('请检查输入正确数量数字！')
            return false
          } else {
            num_ += Number(this.teachingList[i].apply)
          }
          // applydetail
          data_arry.class_id = this.applydetail.class_id.id
          data_arry.old_class_id = this.teachingList[i].class_id
          data_arry.num = this.teachingList[i].apply
          // data_arry.tools_id = this.applyBox.tools_id.id
          data_arry.history_id = this.applyBox.id
          data.push(data_arry)
        }
        if (num_ > Number(this.applyBox.number)) {
          this.$message.error('超过班级申请的数量，请重新填写！')
          return false
        } else if (num_ < Number(this.applyBox.number)) {
          this.$message.error('少于班级申请的数量，请重新填写！')
          return false
        } else {
          console.log('进行提交判断')
          console.log(num_)
          // tools_apply/checked    data:{['classs_id'=>'班级id'，‘tools_id’=>'教辅具id'，‘num’=>‘分配的数量’]}
          console.log('页面传输的数据class_id', this.applydetail)
          console.log('页面提交数据', data)
          // 给出分配 distribute
          this.$post('tools_apply/distribute ', {data: JSON.stringify(data)}).then((response) => {
            if (response.code === 0) {
              this.editFormVisible = false
              this.$message({
                message: '分配成功！',
                type: 'success'
              })
            } else {
            }
          }).catch((err) => {
            console.log(err)
          })
        }
      },
      submitCheckedFn () {
        console.log('确认分配')
        // checked 批量确认接口
        // 上传数据：history_id---申请id
        // class_id------申请班级id
        // number 数量
        console.log(this.list_check)
        var data_ = []
        var that = this
        for (var i in this.list_check) {
          var array_ = {}
          array_.history_id = this.list_check[i].history_id
          array_.class_id = this.list_check[i].class_id.id
          array_.num = this.list_check[i].num
          data_.push(array_)
        }
        this.$confirm('此操将确认分配, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 删除成功
          that.$post('tools_apply/checked ', {data: JSON.stringify(data_)}).then((response) => {
            if (response.code === 0) {
              that.$message({
                message: '分配成功！',
                type: 'success'
              })
              this.$router.go(-1)
            } else {
            }
          }).catch((err) => {
            console.log(err)
          })
        }).catch(() => {
          // 已取消删除
        })
      },
      // 判断最大的输入值
      inputMoneyListern (event, number_, index) {
        if (Number(event.currentTarget.value) > Number(number_)) {
          this.$message.error('超过最大数量！')
          this.teachingList[index].apply = number_
        }
      }
    },
    mounted () {
    }
  }
</script>

<style lang="scss">
  .detailList {
    width: 90%;
    border-radius: 5px;
    box-shadow: 0 0 14px #ddd;
    padding: 30px 20px;
    margin: 30px auto 0;
  }

  .applybody-title {
    padding: 40px 10px 10px;
    span {
      color: red;
    }
  }

  .h2box {
    font-weight: normal;
    font-size: 20px;
    padding: 10px;
    margin-top: 30px;
    background: #ecf5ff;
    display: flex;
    align-items: center;
    justify-content: center;
    span {
      flex: 1;
    }
    i{
      font-style: normal;
      font-size: 14px;
    }
  }


  .table-body-box {
    padding: 0 !important;
    margin: 0 !important;
  }

  .pagelist {
    margin: 10px 0 30px;
    border: 1px solid #eee;
  }

  .pagelist-list {
    display: flex;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 14px;
    color: #333;
    span {
      flex: 1;
      border-right: 1px solid #ddd;
      &:first-child {
        font-size: 16px;
        font-weight: bold;
        color: red;
      }
      &:last-child {
        border-right: none;
      }
      input {
        height: 30px;
        line-height: 30px;
        border-radius: 3px;
        border: 1px solid #eee;
        text-indent: 10px;
      }
    }
  }

  .pagelist-list-title {
    background: #eee;
    span {
      &:first-child {
        font-weight: normal;
        font-size: 14px;
        color: #333;
      }
    }
  }

  .title-name-number {
    margin-top: 30px;
  }

  .title-name-number span {
    color: red;
    font-size: 16px;
    font-weight: bold;
  }

  .class_num_input {
    width: 80%;
    height: 40px;
    text-align: center;
  }
</style>

